<script setup lang="ts">
import { ref } from 'vue'
import { useMainStore } from '@/store'
import { storeToRefs } from 'pinia'
import { Button } from 'ant-design-vue'
import { useMouseInElement } from '@vueuse/core'
import { SYSTEM_THEME } from '@/config'

const $store = useMainStore()
const { toggle } = $store
const { isDarkTheme } = storeToRefs($store)

const switchTheme = ref<InstanceType<typeof Button>>()
const { isOutside } = useMouseInElement(switchTheme)
</script>

<template>
  <a-button
    ref="switchTheme"
    class="flex items-center justify-center switch-theme"
    size="large"
    shape="circle"
    @click="toggle"
  >
    <svg-icon
      :name="isDarkTheme ? 'moon' : 'sun'"
      :color="!isOutside ? SYSTEM_THEME : ''"
    />
  </a-button>
</template>

<style lang="scss" scoped>
.switch-theme {
  min-width: 4rem !important;
  min-height: 4rem !important;
  font-size: 2rem;
  background-color: #fff !important;
  border: none;
  box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014,
    0 9px 28px 8px #0000000d;
}
</style>
